<template>
  <div class="meetings">
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <div class="icons">
          <i class="iconfont icon-huiyi"></i>
        </div>
        <span class="icone">查询会议</span>
      </div>
      <div class="button1">
        <!--      按钮、搜索-->
        <div class="rightBtn">
<!--          按钮-->

        </div>
      </div>
    </el-row>
  </div>
  <div style="padding:20px;" >
    <el-tabs v-model="activeName" class="demo-tabs" >
      <el-tab-pane label="全部" name="all">
        <el-table
            ref="multipleTableRef"
            :data="d.tableDataone"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'14px',
              color:'#000000',
              background:'#EFF3F8',
            }"
        >
          <el-table-column property="meetingName" label="会议名称" width="120" />
          <el-table-column property="place.placeName" label="会议地点" />
          <el-table-column property="establishTime" label="创建日期" >
            <template #default="s">
              <span>{{s.row.establishTime.slice(0,10)+" "+s.row.establishTime.slice(11,19)}}</span>
            </template>

          </el-table-column>
          <el-table-column property="bookMoney1" label="会议记录" >
            <el-button class="button-one" type="warning" @click="tiaozhuan">会议内容</el-button>
          </el-table-column>
          <el-table-column property="state" label="状态" />
          <el-table-column property="beginTime" label="开始日期" />
          <el-table-column property="tagTime" label="结束日期" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="今天" name="day">
        <el-table
            ref="multipleTableRef"
            :data="d.ALltableDataOne"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'14px',
              color:'#000000',
              background:'#EFF3F8',
            }"
        >
          <el-table-column property="meetingName" label="会议名称" width="120" />
          <el-table-column property="place.placeName" label="会议地点" />
          <el-table-column property="establishTime" label="创建日期" >
            <template #default="s">
              <span>{{s.row.establishTime.slice(0,10)+" "+s.row.establishTime.slice(11,19)}}</span>
            </template>
          </el-table-column>
          <el-table-column property="bookMoney1" label="会议记录" >
            <el-button class="button-one" type="warning" @click="tiaozhuan">会议内容</el-button>
          </el-table-column>
          <el-table-column property="state" label="状态" />

          <el-table-column property="beginTime" label="开始日期" />
          <el-table-column property="tagTime" label="结束日期" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChangeOne"
                @current-change="handleCurrentChangeOne"
            />
          </div>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="本周" name="week" @tab-click="handleClickTow">
        <el-table
            ref="multipleTableRef"
            :data="d.tableWeek"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'14px',
              color:'#000000',
              background:'#EFF3F8',
            }"
        >
          <el-table-column property="meetingName" label="会议名称" width="120" />
          <el-table-column property="place.placeName" label="会议地点" />
          <el-table-column property="establishTime" label="创建日期">
            <template #default="s">
              <span>{{s.row.establishTime.slice(0,10)+" "+s.row.establishTime.slice(11,19)}}</span>
            </template>
          </el-table-column>

          <el-table-column property="bookMoney1" label="会议记录" >
            <el-button class="button-one" type="warning" @click="tiaozhuan">会议内容</el-button>
          </el-table-column>
          <el-table-column property="state" label="状态" />

          <el-table-column property="beginTime" label="开始日期" />
          <el-table-column property="tagTime" label="结束日期" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChangeTow"
                @current-change="handleCurrentChangeTow"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本月" name="mounth" @tab-click="handleClickThree">
        <el-table
            ref="multipleTableRef"
            :data="d.tableMonth"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'14px',
              color:'#000000',
              background:'#EFF3F8',
            }"
        >
          <el-table-column property="meetingName" label="会议名称" width="120" />
          <el-table-column property="place.placeName" label="会议地点" />
          <el-table-column property="establishTime" label="创建日期" >
            <template #default="s">
              <span>{{s.row.establishTime.slice(0,10)+" "+s.row.establishTime.slice(11,19)}}</span>
            </template>
          </el-table-column>
          <el-table-column property="bookMoney1" label="会议记录" >
            <el-button class="button-one" type="warning" @click="tiaozhuan">会议内容</el-button>
          </el-table-column>
          <el-table-column property="state" label="状态" />

          <el-table-column property="beginTime" label="开始日期" />
          <el-table-column property="tagTime" label="结束日期" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChangeThree"
                @current-change="handleCurrentChangeThree"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本季" name="fourth" @tab-click="handleClickFour">
        <el-table
            ref="multipleTableRef"
            :data="d.tableQuarter"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'14px',
              color:'#000000',
              background:'#EFF3F8',
            }"
        >
          <el-table-column property="meetingName" label="会议名称" width="120" />
          <el-table-column property="place.placeName" label="会议地点" />
          <el-table-column property="establishTime" label="创建日期" >
            <template #default="s">
              <span>{{s.row.establishTime.slice(0,10)+" "+s.row.establishTime.slice(11,19)}}</span>
            </template>
          </el-table-column>
          <el-table-column property="bookMoney1" label="会议记录" >
            <el-button class="button-one" type="warning" @click="tiaozhuan">会议内容</el-button>
          </el-table-column>
          <el-table-column property="state" label="状态" />

          <el-table-column property="beginTime" label="开始日期" />
          <el-table-column property="tagTime" label="结束日期" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChangeFour"
                @current-change="handleCurrentChangeFour"
            />
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="本年" name="yaer" @tab-click="handleClickFive">
        <el-table
            ref="multipleTableRef"
            :data="d.tableYear"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              fontWeight:'normal',
              fontSize:'14px',
              color:'#000000',
              background:'#EFF3F8',
            }"
        >
          <el-table-column property="meetingName" label="会议名称" width="120" />
          <el-table-column property="place.placeName" label="会议地点" />
          <el-table-column property="establishTime" label="创建日期" >
            <template #default="s">
              <span>{{s.row.establishTime.slice(0,10)+" "+s.row.establishTime.slice(11,19)}}</span>
            </template>
          </el-table-column>
          <el-table-column property="bookMoney1" label="会议记录" >
            <el-button class="button-one" type="warning" @click="tiaozhuan">会议内容</el-button>
          </el-table-column>
          <el-table-column property="state" label="状态" />
          <el-table-column property="beginTime" label="开始日期" />
          <el-table-column property="tagTime" label="结束日期" />
        </el-table>
        <el-row justify="center">
          <div class="demo-pagination-block" style="margin-top: 10px;" >
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChangeFive"
                @current-change="handleCurrentChangeFive"
            />
          </div>
        </el-row>
      </el-tab-pane>

    </el-tabs>

  </div>


</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref, toRefs} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import axios from "axios";





// 页面跳转
const router = useRouter();
const tiaozhuan =()=>{
  router.push("/content_meeting");
}

// 搜索框
const input2 = ref('')

// 所有数据
const d = reactive({
  s:true,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //第全部表格数据
  tableDataone:[],
  // 当天表格数据
  ALltableDataOne:[],
  // 本周表格数数据
  tableWeek:[],
  // 本月表格数据
  tableMonth:[],
  // 季度表格数据
  tableQuarter:[],
  // 本年表格数据
  tableYear:[],

});

// 默认进入查询会议页面---默认是全部页面
const activeName = ref('all')


const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 表单数据模型
const form = reactive({
  meetingId:'',
  meetingName:'',
  placeId:'',
  placeName:'',
  establishTime:'',
  state:'',
  beginTime:'',
  tagTime:'',
  stateId:'',
  stateName:'',
})


/**
 * 查询全部会议记录
 */
const getDate =()=>{
  axios.get("http://localhost:1688/selectMeet/selectMeeting").then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
    console.log(res.data.data)
  })
}

/**
 * 全部页面的分页
 */
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableDataone = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}

// 查询当天的会议记录
const handleClickOne=()=>{
  axios.get("http://localhost:1688/selectMeet/selectDate").then((res)=>{
    var data=res.data.data
    ALltableDataOne.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelDataOne();//调用方法
  })
}
/**
 * 当天页面的分页
 */
const ALltableDataOne=ref([])
const getTabelDataOne=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableDataOne.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.ALltableDataOne = shu ;
}

const handleSizeChangeOne = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelDataOne();
}

const handleCurrentChangeOne= (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelDataOne();
}

/**
 * 查询本周会议记录
 */
const handleClickTow=()=>{
  axios.get("http://localhost:1688/selectMeet/selectWeek").then((res)=>{
    var data=res.data.data
    ALltableDataTow.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelDataTow();//调用方法
  })
}
/**
 * 当天本周的分页
 */
const ALltableDataTow=ref([])
const getTabelDataTow=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableDataTow.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableWeek= shu ;

}

const handleSizeChangeTow = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelDataOne();
}

const handleCurrentChangeTow= (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelDataOne();
}

/**
 * 查询当前本月的会议记录
 */
const handleClickThree=()=> {
  axios.get("http://localhost:1688/selectMeet/selectMonth").then((res) => {
    var data = res.data.data
    ALltableDataThree.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelDataThree();//调用方法
  })
}
/**
 * 查询当前本月的分页
 */
const ALltableDataThree=ref([])
const getTabelDataThree=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableDataThree.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableMonth= shu ;
}

const handleSizeChangeThree = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelDataThree();
}

const handleCurrentChangeThree= (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelDataThree();
}

/**
 * 查询季度的会议记录
 */
const handleClickFour=()=> {
  axios.get("http://localhost:1688/selectMeet/selectQuarter").then((res) => {
    var data = res.data.data
    ALltableDataFour.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelDataFour();//调用方法
  })
}
/**
 * 查询季度的分页
 */
const ALltableDataFour=ref([])
const getTabelDataFour=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableDataFour.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableQuarter= shu ;
}

const handleSizeChangeFour = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelDataFour();
}

const handleCurrentChangeFour= (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelDataFour();
}

/**
 * 查询本年的会议记录
 */
const handleClickFive=()=> {
  axios.get("http://localhost:1688/selectMeet/selectYear").then((res) => {
    var data = res.data.data
    ALltableDataFive.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelDataFive();//调用方法
  })
}
/**
 * 查询季度的分页
 */
const ALltableDataFive=ref([])
const getTabelDataFive=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableDataFive.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableYear= shu ;
}

const handleSizeChangeFive = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelDataFive();
}

const handleCurrentChangeFive= (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelDataFive();
}




//默认启动
onBeforeMount(function () {
  // 查询全部会议内容
  getDate()
  // 查询今天会议内容
  handleClickOne()
  // 查询本周会议内容
  handleClickTow()
  // 查询本月会议记录
  handleClickThree()
  // 查询季度会议记录
  handleClickFour()
  // 查询本年会议记录
  handleClickFive()
  // 查询会议状态
  focus()
})

</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");


*{
  margin: 0px;
  padding: 0px;
}
.el-row{
  padding: 5px 0px;
}

/deep/ .el-tabs__header {
  margin-bottom: 0px;
}

.search{
  border: 1px solid silver;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.icons{
  width: 50px;
  height: 50px;
  background: dodgerblue;
  text-align: center;
  line-height: 50px;
  /*圆角*/
  border-radius: 40px;
  margin-left: 20px;
}

/*会议*/
.icon-huiyi {
  color: white;
  font-size: 24px;
  line-height: 50px;
}

.icone{
  padding-left: 15px;
  line-height: 50px;
}
.icon{
  width: 25px;
  height: 25px;
}

.icone{
  padding-left: 15px;
}
.button1{
  display: flex;
}
.el-button{
  background: dodgerblue;
  color: white;
  margin-right: 20px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/*按钮、搜索框*/
.rightBtn {
  float: right;
}
/*按钮*/
.rightBtn-one{
  padding: 5px;
}
/*表格里面的按钮*/
.button-one{
  background-color: #E6A23C;
  padding: 5px;
}

/deep/ .el-tag{
  padding: 15px 10px;
}
</style>